
import React, { Component } from "react";
import { Typography, Divider, Table, Rate, Tabs, DatePicker,Input, Button,Timeline, Progress, Descriptions, Collapse, Select, Menu, Tag, Badge, Card, Image  } from 'antd';
import {   BankOutlined, FormatPainterOutlined, CarOutlined, PayCircleOutlined, SendOutlined } from '@ant-design/icons';
import Breadcrumbs from "../../components/component/Breadcrumb/breadcrumb";


const { TabPane } = Tabs;
const { Option } = Select;
const { SubMenu } = Menu;
const { Panel } = Collapse;
const { Title, Paragraph, Text, Link } = Typography;
const content ={
    display:'flex',
    justifyContent:'start',
    marginBottom:50
}
const leftContent = {
    width:'15%',
};
const rightContent ={
  width:'83%',
  marginLeft:15,
  display:'flex',
  justifyContent:'start'
}

const timeLineData1 =[
  {
    key:'0001',
    color: 'blue',
    line1:'开始立项',
    line2:'立项提交等待审批',
    line3:'2018-12-25 10:00:00',
  },
  {
    key:'10001',
    color: 'blue',
    line1:'开始项目建设',
    line2:'2019-02-03 11:00:00',
    line3:'',
  },
  {
    key:'00011',
    color: 'red',
    line1:'项目暂时搁置',
    line2:'2020-8-12 10:00:00',
    line3:'',
  },
  {
    key:'00010',
    color: 'green',
    line1:'项目重新建设',
    line2:'2020-10-19 13:00:00',
    line3:'',
  },
  {
    key:'0001156',
    color: 'green',
    line1:'项目建设中',
    line2:'2022-02-05 12:00:00',
    line3:'',
  },  
];

const timeLineData2 =[
  {
    key:'328001',
    color: 'blue',
    line1:'立项开始',
    line2:'国家立项并审批',
    line3:'2019-03-27 10:00:00',
  },
  {
    key:'328002',
    color: 'blue',
    line1:'开始项目建设',
    line2:'2019-10-03 11:00:00',
    line3:'工程队就位',
  },
  {
    key:'328004',
    color: 'red',
    line1:'项目搁置',
    line2:'2021-11-30 18:08:28',
    line3:'进度: 58%',
  },
];

const timeLineData3 =[
  {
    key:'328006',
    color: 'gray',
    line1:'开始立项',
    line2:'国家立项审批成功',
    line3:'2019-03-27 10:00:25',
  },
  {
    key:'328007',
    color: 'gray',
    line1:'前期筹备',
    line2:'2019-10-03 11:17:28',
    line3:'项目拨款及工程队就位',
  },
  {
    key:'328008',
    color: 'blue',
    line1:'项目开工',
    line2:'2020-01-28 11:21:00',
    line3:'进度: 0%',
  },
  {
    key:'328009',
    color: 'blue',
    line1:'项目建设',
    line2:'2021-01-18 18:22:00',
    line3:'进度: 80%',
  },
  {
    key:'3280010',
    color: 'green',
    line1:'项目完成,开始验收',
    line2:'2022-01-08 19:35:24',
    line3:'进度: 100%',
  },
  {
    key:'3280011',
    color: 'green',
    line1:'项目验收成功',
    line2:'2022-03-27 19:10:19',
    line3:'进度: 100%',
  },
];

const menus = [
    {
      name:'城建项目规划',
      key:'build',
      icon:<BankOutlined style={{fontSize:20}} />,
    },
    {
      name:'交通建设规划',
      key:'traffic',
      icon:<CarOutlined style={{fontSize:20}} />,
    },
    {
      name:'商业布局',
      key:'business',
      icon:<PayCircleOutlined style={{fontSize:20}} />,
    },
    {
      name:'中大产业布局',
      key:'industry',
      icon:<SendOutlined style={{fontSize:20}} />,
    }                     
]

const srcData = [
      {
        key:0,
        type:'build',
        header: <p><span style={{marginRight:20}}>沣东自贸产业园建设情况</span><Tag color="#2db7f5">省级重点项目</Tag> </p>,
        content:  <Descriptions title="沣东自贸产业园建设" bordered>
            <Descriptions.Item label="工程名称">陕西省沣东自贸产业园</Descriptions.Item>
            <Descriptions.Item label="投资金额(￥)">68亿</Descriptions.Item>
            <Descriptions.Item label="是否重点项目">否</Descriptions.Item>
            <Descriptions.Item label="开始时间">2018-04-24 09:00:00</Descriptions.Item>
            <Descriptions.Item label="预计结束时间" span={2}>
              2023-01-12 18:00:00
            </Descriptions.Item>
            <Descriptions.Item label="项目状态" span={3}>
              <Badge status="processing" text="建设中" />
            </Descriptions.Item>
            <Descriptions.Item label="建设进度" span={3}>
              <Progress style={{width:'60%',marginLeft:20}} percent={85} size="small" status="active" />
            </Descriptions.Item>     
            <Descriptions.Item label="施工现场" span={3}>
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=3075136056,1786105257&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=1098492265,4236566874&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=75716904,838637831&fm=253&fmt=auto&app=138&f=JPEG?w=716&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=4132890100,402605111&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
                />
            </Descriptions.Item>        
            <Descriptions.Item label="建设公司">中建2局</Descriptions.Item>
            <Descriptions.Item label="招标编号">js-180056</Descriptions.Item>
            <Descriptions.Item label="总面积">30万平方米</Descriptions.Item>
            <Descriptions.Item label="项目概述">
              沣东自贸产业园位于中国（陕西）自由贸易试验区西咸片区沣东新城功能区，占地面积约215亩，总建筑面积约30万平方米。
              <br />
              沣东自贸产业园由西安沣东自贸产业园发展有限公司投资开发。
              <br />
              中国（陕西）自由贸易试验区西咸片区沣东新城功能区，征和四路以北，太平路以东，太安路以西，征和六路以南，占地面积约215亩，总建筑面积约30万平方米。
              <br />
              项目涵盖低密度生态办公、特色展示中心、配套商业等多元业态，围绕“4+1”现代服务产业体系，重点发展总部经济、新兴金融、跨境电商、专业服务、孵化器，着力构建全方位运营服务平台
              <br />
            </Descriptions.Item>
          </Descriptions>,
        timeLineStr: timeLineData1,
        pending:'进行中...'
      },
      {
        key:1,
        type:'build',
        header: <p><span style={{marginRight:20}}>西安市十四运奥体中心主场馆建设</span><Tag color="#f50">国家重点项目</Tag> </p>,
        content:  <Descriptions title="西安奥体中心主场馆建设" bordered>
            <Descriptions.Item label="工程名称">西安奥体中心场馆建设</Descriptions.Item>
            <Descriptions.Item label="投资金额(￥)">105亿</Descriptions.Item>
            <Descriptions.Item label="是否重点项目">是</Descriptions.Item>
            <Descriptions.Item label="开始时间">2019-03-18 10:30:00</Descriptions.Item>
            <Descriptions.Item label="预计结束时间" span={2}>
              2021-07-21 20:00:00
            </Descriptions.Item>
            <Descriptions.Item label="项目状态" span={3}>
              <Badge status="success" text="项目验收完成" />
            </Descriptions.Item>
            <Descriptions.Item label="建设进度" span={3}>
              <Progress style={{width:'60%',marginLeft:20}} percent={100} format={percent => `进度:${percent}%`} size="small" />
            </Descriptions.Item>         
            <Descriptions.Item label="施工现场" span={3}>
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=3075136056,1786105257&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=1098492265,4236566874&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=75716904,838637831&fm=253&fmt=auto&app=138&f=JPEG?w=716&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=4132890100,402605111&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
                />
            </Descriptions.Item>                    
            <Descriptions.Item label="建设公司">川建总局4局分公司</Descriptions.Item>
            <Descriptions.Item label="招标编号">at-290016</Descriptions.Item>
            <Descriptions.Item label="总面积">52万平方米</Descriptions.Item>
            <Descriptions.Item label="项目概述">
              西安奥林匹克体育中心，简称西安奥体中心，位于陕西省西安市灞桥区全运路。
              <br />
              西安奥林匹克体育中心由“一场两馆”及室外配套运动场地组成。总用地1089亩，净用地862亩，总建筑面积52万㎡
              <br />
              西安奥林匹克体育中心是国内首个5G全覆盖场馆，是第十四届全运会的主场馆，于2017年10月9日开工建设。2020年5月30日，西安奥体中心体育馆正式通过竣工验收。2020年11月20日，西安奥林匹克体育中心正式投入使用。
              <br />
              2021年9月15日，中华人民共和国第十四届运动会开幕式在西安奥体中心体育场举行。 
              <br />
            </Descriptions.Item>
          </Descriptions>,
        timeLineStr: timeLineData3,
        pending:false
      },
      {
        key:2,
        type:'build',
        header: <p><span style={{marginRight:20}}>中国丝路国际中心建设情况</span><Tag color="#f50">国家重点项目</Tag> </p>,
        content:  <Descriptions title="中国丝路国际中心建设情况" bordered>
            <Descriptions.Item label="工程名称">丝路国际中心</Descriptions.Item>
            <Descriptions.Item label="投资金额(￥)">108亿</Descriptions.Item>
            <Descriptions.Item label="是否重点项目">是</Descriptions.Item>
            <Descriptions.Item label="开始时间">2017-07-06 09:00:00</Descriptions.Item>
            <Descriptions.Item label="预计结束时间" span={2}>
              2025-01-12 18:00:00
            </Descriptions.Item>
            <Descriptions.Item label="项目状态" span={3}>
              <Badge status="processing" text="建设中" />
            </Descriptions.Item>
            <Descriptions.Item label="建设进度" span={3}>
              <Progress style={{width:'60%',marginLeft:20}} percent={37} size="small" status="active" />
            </Descriptions.Item>   
            <Descriptions.Item label="施工现场" span={3}>
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=3075136056,1786105257&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=1098492265,4236566874&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=75716904,838637831&fm=253&fmt=auto&app=138&f=JPEG?w=716&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=4132890100,402605111&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
                />
            </Descriptions.Item>                          
            <Descriptions.Item label="建设公司">绿地集团中建3建</Descriptions.Item>
            <Descriptions.Item label="招标编号">js-1700895</Descriptions.Item>
            <Descriptions.Item label="总面积">68万平方米</Descriptions.Item>
            <Descriptions.Item label="项目概述">
              丝路国际中心，拟投资100亿元，总建筑面积约65万平方米。
              <br />
              501米的超高层中将包括超5A级写字楼、国际会议中心、五星级酒店、商务酒店、服务式公寓、高端国际百货、商业街等业态。
              <br />
              配套100-150米高层建筑，形成错落有致的“天际线效应”。
              <br />
              该项目北临沣东大道、沣东城市广场，西邻复兴大道，南临科源南路，东临科源一路，已于2017年7月6日开工
              <br />
            </Descriptions.Item>
          </Descriptions>,
        timeLineStr:timeLineData2,
        pending:false
      },
      {
        key:3,
        type:'build',
        header: <p><span style={{marginRight:20}}>西安市丝路欢乐世界建设情况</span></p>,
        content:  <Descriptions title="西安丝路欢乐世界建设" bordered>
            <Descriptions.Item label="工程名称">西安丝路欢乐世界建设</Descriptions.Item>
            <Descriptions.Item label="投资金额(￥)">122亿</Descriptions.Item>
            <Descriptions.Item label="是否重点项目">否</Descriptions.Item>
            <Descriptions.Item label="开始时间">2017-04-09 09:00:00</Descriptions.Item>
            <Descriptions.Item label="预计结束时间" span={2}>
              2022-09-28 17:30:00
            </Descriptions.Item>
            <Descriptions.Item label="项目状态" span={3}>
              <Badge status="processing" text="建设中" />
            </Descriptions.Item>
            <Descriptions.Item label="建设进度" span={3}>
              <Progress style={{width:'60%',marginLeft:20}} percent={98} size="small" status="active" />
            </Descriptions.Item>    
            <Descriptions.Item label="施工现场" span={3}>
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=3075136056,1786105257&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=1098492265,4236566874&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img1.baidu.com/it/u=8360268,3720410426&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=4132890100,402605111&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
                />
            </Descriptions.Item>                         
            <Descriptions.Item label="建设公司">中建6局</Descriptions.Item>
            <Descriptions.Item label="招标编号">js-180002547</Descriptions.Item>
            <Descriptions.Item label="总面积">64万平方米</Descriptions.Item>
            <Descriptions.Item label="项目概述">
              丝路欢乐世界作为西安市丝绸之路风情城的核心项目，通过建造中国神奇中华街区、印度恒河象谷街区、中亚沙海秘境街区、中东瑰丽波斯街区、俄罗斯极光雪国街区、希腊众神之战街区、意大利荣耀罗马街区七个主题文化街区
              <br />
              丝路欢乐世界总占地567亩，于2022年9月28日正式开园。
              <br />
              2015年4月，陕旅集团携手西咸新区沣西新城共同投资开发丝绸之路风情城项目。
              <br />
              丝路欢乐世界以“丝路、欢乐、科技”为核心价值，以“开放式街区”为空间形态，以“丝路 与世界共生长”为传播定位，以商业、文化教育科技、休闲欢乐、国际文化交流、智慧景区、平台投资管理“六大体系”构建业态组合
              <br />
            </Descriptions.Item>
          </Descriptions>,
        timeLineStr: timeLineData1,
        pending:'进行中...'
      },
      {
        key:4,
        type:'traffic',
        header: <p><span style={{marginRight:20}}>"十四五"综合交通运输发展规划</span><Tag color="#2db7f5">省级重点项目</Tag></p>,
        content:  <Descriptions title="西延、西十、西康高铁建设" bordered>
            <Descriptions.Item label="工程名称">西延、西十、西康高铁建设</Descriptions.Item>
            <Descriptions.Item label="投资金额(￥)">298亿</Descriptions.Item>
            <Descriptions.Item label="是否重点项目">否</Descriptions.Item>
            <Descriptions.Item label="开始时间">2020-05-28 09:00:00</Descriptions.Item>
            <Descriptions.Item label="预计结束时间" span={2}>
              2025-04-16 18:30:00
            </Descriptions.Item>
            <Descriptions.Item label="项目状态" span={3}>
              <Badge status="processing" text="建设中" />
            </Descriptions.Item>
            <Descriptions.Item label="建设进度" span={3}>
              <Progress style={{width:'60%',marginLeft:20}} percent={25} size="small" status="active" />
            </Descriptions.Item>     
            <Descriptions.Item label="施工现场" span={3}>
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=3075136056,1786105257&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=1098492265,4236566874&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=75716904,838637831&fm=253&fmt=auto&app=138&f=JPEG?w=716&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img0.baidu.com/it/u=421204149,3371486500&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=391"
                />
            </Descriptions.Item>                        
            <Descriptions.Item label="建设公司">中建2局，中建6局，中铁11局</Descriptions.Item>
            <Descriptions.Item label="招标编号">js-1800058214</Descriptions.Item>
            <Descriptions.Item label="总里程">417公里</Descriptions.Item>
            <Descriptions.Item label="项目概述">
              基本完成西安至延安、西安至十堰、西安至安康高速铁路的建设任务，五年计划建设高速铁路147公里
              <br />
              对外综合运输通道重点工程“米”字形高速铁路网基本完成
              <br />
              形成以高速铁路、高速公路网络为核心，普速铁路、国省干线、机场航线为补充，辐射全国重点城市的“米”字形综合运输大通道。
              <br />
              推进城际铁路建设以及货运铁路的扩能改造，串联西安、咸阳、宝鸡、渭南，逐步提升关中城市群铁路综合运输效能。
              <br />
            </Descriptions.Item>
          </Descriptions>,
        timeLineStr:timeLineData2,
        pending:'进行中...'
      }, 
      {
        key:5,
        type:'industry',
        header: <p><span style={{marginRight:20}}>西安市“十四五”产业发展规划</span><Tag color="#f50">国家重点项目</Tag></p>,
        content:  <Descriptions title="西安市“十四五”产业发展规划" bordered>
            <Descriptions.Item label="工程名称">西安市“十四五”产业发展规划</Descriptions.Item>
            <Descriptions.Item label="投资金额(￥)">108亿</Descriptions.Item>
            <Descriptions.Item label="是否重点项目">否</Descriptions.Item>
            <Descriptions.Item label="开始时间">2020-05-28 09:00:00</Descriptions.Item>
            <Descriptions.Item label="预计结束时间" span={2}>
              2025-05-19 18:30:00
            </Descriptions.Item>
            <Descriptions.Item label="项目状态" span={3}>
              <Badge status="processing" text="建设中" />
            </Descriptions.Item>
            <Descriptions.Item label="建设进度" span={3}>
              <Progress style={{width:'60%',marginLeft:20}} percent={18} size="small" status="active" />
            </Descriptions.Item>        
            <Descriptions.Item label="施工现场" span={3}>
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=3075136056,1786105257&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=1098492265,4236566874&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=1956717608,3762634966&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=4132890100,402605111&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
                />
            </Descriptions.Item>                     
            <Descriptions.Item label="建设公司">中建2局，中建6局</Descriptions.Item>
            <Descriptions.Item label="招标编号">js-1800085402</Descriptions.Item>
            <Descriptions.Item label="总里程">158公里</Descriptions.Item>
            <Descriptions.Item label="项目概述">
              到2025年，“6+5+6+1”现代产业体系基本形成，先进制造业强市建设取得突破性进展，
              <br />
              国家级高新技术企业突破1万家，经济总量达到1.4万亿元以上
              <br />
              到2035年，基本建成实体经济、科技创新、现代金融、人力资源协同发展的现代产业体系，实现产业结构高级化、布局合理化、发展集群化、创新协同化，产业核心竞争力显著提升。
              <br />
              先进制造业强市建设取得重大进展，碳中和工作扎实推进，碳达峰目标顺利实现，产业结构持续优化。科技强市、文化强市、教育强市、健康西安建设取得重大成果，全面建成具有国际影响力竞争力的国家中心城市和具有历史文化特色的国际化大都市。
              <br />
            </Descriptions.Item>
          </Descriptions>,
        timeLineStr:timeLineData2,
        pending:'进行中...'
      },    
      {
        key:6,
        type:'business',
        header: <p><span style={{marginRight:20}}>2022年西安及周边值得关注的新开商业项目</span></p>,
        content:  <Descriptions title="2022年西安及周边新开商业" bordered>
            <Descriptions.Item label="工程名称">2022西安及周边新商业</Descriptions.Item>
            <Descriptions.Item label="投资金额(￥)">188亿</Descriptions.Item>
            <Descriptions.Item label="是否重点项目">否</Descriptions.Item>
            <Descriptions.Item label="开始时间">2018-05-28 09:00:00</Descriptions.Item>
            <Descriptions.Item label="预计结束时间" span={2}>
              2022-10-18 18:30:00
            </Descriptions.Item>
            <Descriptions.Item label="项目状态" span={3}>
              <Badge status="processing" text="建设中" />
            </Descriptions.Item>
            <Descriptions.Item label="建设进度" span={3}>
              <Progress style={{width:'60%',marginLeft:20}} percent={98} size="small" status="active" />
            </Descriptions.Item>     
            <Descriptions.Item label="施工现场" span={3}>
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=3075136056,1786105257&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=1098492265,4236566874&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=1956717608,3762634966&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500"
                />
                <Image
                  width={200}
                  height={200}
                  style={{marginRight:10}}
                  src="https://img2.baidu.com/it/u=4132890100,402605111&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
                />
            </Descriptions.Item>                        
            <Descriptions.Item label="建设公司">中建12局</Descriptions.Item>
            <Descriptions.Item label="招标编号">js-18008958</Descriptions.Item>
            <Descriptions.Item label="总面积">105万平方米</Descriptions.Item>
            <Descriptions.Item label="项目概述">
              西安公布了159座商贸综合体的集中启动。尽管在过去的一年西安的商业发展并非一帆风顺
              <br />
              2021年还是开出了万象天地、环球港、太乙城、西影TIME、SKP-S等各具特色的商业项目。
              <br />
              DELVAUX、Abercrombie & Fitch、KOLON SPORT、BADMARKET、Marionnaud Paris、HARMAY等
              <br />
            </Descriptions.Item>
          </Descriptions>,
        timeLineStr:timeLineData2,
        pending:'进行中...'
      },                           
]

export default class extends Component {
  constructor() {
    super();
    this.state = {
      timeLineData:null,
      pending:false,
      srcData:[],
      cardInfo:'沣东自贸产业园建设情况',
      bussiness:'中建2局'
    };
  }

  componentDidMount() {
    let datas = srcData.filter(it => it.type === 'build');
    // this.setState({timeLineData:this.state.srcData[0].timeLineStr, pending:this.state.srcData[0].pending,srcData:datas});
    this.setState({srcData:datas});
    window.scrollTo(0, 0);
  }

  handleClick = e => {
    let datas = srcData.filter(it => it.type === e.key);
    this.setState({srcData:datas,timeLineData:timeLineData1, cardInfo:datas[0].content.props.title, bussiness:datas[0].content.props.children[8].props.children});
    
  };

   collapseChange = (e) =>{
      const { srcData } = this.state;
        if(e!= undefined){
          let da = srcData.filter(item => {
            if(item.key == e){
                return item;
            }
          });
          this.setState({timeLineData:da[0].timeLineStr, pending:da[0].pending});
        }
   }

  callback = (key) => {
    
  }

  render() {
    const { timeLineData, pending, srcData, cardInfo, bussiness } = this.state;
    return (
      <>
        <div style={{marginLeft:0}}>
          <Breadcrumbs props={this.props}></Breadcrumbs>
        </div> 
        <Divider />
        <div style={{width:'94%',height:'100%',margin:'0 auto'}}>
        <div style={{textAlign:'left',marginTop:20,marginBottom:20}}>
          <Title level={5}>项目开建规划</Title>
          <Divider></Divider>
        </div>               
        <div style={content}> 
          <div style={leftContent}>
            <Menu
                onClick={this.handleClick}
                defaultSelectedKeys={['build']}
                defaultOpenKeys={['sub1']}
                mode="inline"
                inlineCollapsed={this.state.collapsed}>
                  {
                    menus && menus.map((it)=>{
                      return(
                        <Menu.Item  key={it.key} icon={it.icon}>
                            {it.name}
                        </Menu.Item>
                      )
                    })
                  }
            </Menu>   
            <Card
              size="small"
              title="项目卡片"
              extra={<a href="#">更多</a>}
              style={{
                width: 230,
                marginTop:50,
              }}
            >
              <p style={{textAlign:'center',marginTop:20}}>{cardInfo}</p>
              <Divider></Divider>
              <p style={{textAlign:'center'}}>【{bussiness}】</p>
              <Divider></Divider>
              <Card.Grid>{ bussiness === '中建2局'? '双层锁网横跨屋顶': '商贸综合体'}</Card.Grid>
              <Card.Grid>{ bussiness === '中建2局'? '专业锚固草坪': '特色商业'}</Card.Grid>
              <Card.Grid>{ bussiness === '中建2局'? '结构高强度': '马鞍形沉浸式看台'}</Card.Grid>
            </Card>             
          </div>
          <div style={rightContent}>
            <div style={{textAlign:'left',  marginLeft:5, width:'80%'}}>
                  <Title style={{textAlign:'left', marginLeft:10}} level={5}>规划建设项目列表 <a style={{float:'right',marginRight:30,marginTop:15}}>项目图集</a></Title>
                  <Divider />
                  <Collapse onChange={this.collapseChange} defaultActiveKey={['0']} accordion style={{margin:10}}>
                      {
                        srcData && srcData.map(it =>{
                          return(
                            <Panel header={it.header} key={it.key}>
                              <span>{it.content}</span>
                            </Panel>
                          )
                        })
                      }
                </Collapse>
            </div>
            <div style={{ marginLeft:15, width:'20%'}}>
                <Title style={{textAlign:'left',marginLeft:22}} level={5}><FormatPainterOutlined /> 项目建设进度</Title>
                <Divider dashed />
                <div>
                  <Timeline pending={pending} style={{width:200,marginLeft:30, textAlign:'left'}}>
                    {
                      timeLineData && timeLineData.map((it)=>{
                          return (
                            <Timeline.Item key={it.key} color={it.color}>
                                <p>{it.line1}</p>
                                <p>{it.line2}</p>
                                <p>{it.line3}</p>                              
                            </Timeline.Item>
                          )
                      })
                    }
                  </Timeline>
                </div>
            </div>
          </div>
        </div>
        </div>
      </>
    )
  }
}
